<template>
    <el-row>
        <el-col :span="24">
            <div class="grid-content ep-bg-purple-dark" />
            <el-card>
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item>
                        <el-row>
                            <el-col :span="24">
                                <el-button type="success" style="width: 100%; margin-right: 10px;" @click="showAddDialog">入库</el-button>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item style="float: right;">
                        <el-input v-model="searchCondition.partName" placeholder="请输入配件名称查询" @input="onSearch" />
                    </el-form-item>
                    <el-form-item style="float: right;">
                        <el-input v-model="searchCondition.partCode" placeholder="请输入配件编号查询" @input="onSearch" />
                    </el-form-item>
                </el-form>
                <el-table :data="pageInfo.list" border style="width: 100%">
                    <el-table-column prop="partId" label="ID" width="50px" />
                    <el-table-column prop="partCode" label="配件编号" />
                    <el-table-column prop="partName" label="配件名称" />
                    <el-table-column prop="spec" label="规格型号" />
                    <el-table-column prop="unit" label="单位" />
                    <el-table-column prop="category" label="类别" />
                    <el-table-column prop="minStock" label="最低库存" />
                    <el-table-column prop="maxStock" label="最高库存" />
                    <el-table-column prop="stock" label="库存" />
                    <el-table-column label="库存状态" width="140px">
                        <template #default="scope">
                            <el-tag :type="getStockStatusType(scope.row)" size="large">
                                {{ getStockStatusText(scope.row) }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button size="small" type="primary" @click="selectByoid(scope.row.partId)">修改</el-button>
                            <el-popconfirm title="你确定要删除嘛" confirm-button-text="确认" cancel-button-text="取消"
                                           @confirm="deleteByOid(scope.row.partId)">
                                <template #reference>
                                    <el-button size="small" type="danger">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row class="row-bg" justify="center" style="margin-top: 20px;">
                    <el-pagination background layout="prev, pager, next" :total="pageInfo.total"
                                   :page-size="pageInfo.pageSize" @change="selectByPage" />
                </el-row>
            </el-card>
        </el-col>
    </el-row>
    <!--添加业主的对话框开始-->
    <el-dialog v-model="addDialogshow" title=" 入库" width="500">
        <el-form>
            <el-form-item label="配件名称" label-width="20%">
                <el-input v-model="ownerAdd.partName" v-autocomplete="off" />
            </el-form-item>
            <el-form-item label="配件编号" label-width="20%">
                <el-input v-model="ownerAdd.partCode" v-autocomplete="off" />
            </el-form-item>
            <el-form-item label="规格型号" label-width="20%">
                <el-input v-model="ownerAdd.spec" v-autocomplete="off" />
            </el-form-item>
            <el-form-item label="单位" label-width="20%">
                <el-input v-model="ownerAdd.unit" v-autocomplete="off" />
            </el-form-item>
            <el-form-item label="类别" label-width="20%">
                <el-input v-model="ownerAdd.category" v-autocomplete="off" />
            </el-form-item>
            <el-form-item label="最低库存" label-width="20%">
                <el-input v-model="ownerAdd.minStock" v-autocomplete="off" />
            </el-form-item>
            <el-form-item label="最高库存" label-width="20%">
                <el-input v-model="ownerAdd.maxStock" v-autocomplete="off" />
            </el-form-item>
            <el-form-item label="库存" label-width="20%">
                <el-input v-model="ownerAdd.stock" v-autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="addDialogshow = false">取消</el-button>
                <el-button type="primary" @click="insert">确认</el-button>
            </div>
        </template>
    </el-dialog>
    <!--添加业主的对话框结束-->
    <!--修改业主的对话框开始-->
    <el-dialog v-model="updateDialogShow" title=" 修改配件" width="500">
        <el-form>
            <el-form-item label="配件名称" label-width="20%">
                <el-input v-model="ownerUpdate.partName" v-autocomplete="off" />
            </el-form-item>
            <el-form-item label="配件编号" label-width="20%">
                <el-input v-model="ownerUpdate.partCode" v-autocomplete="off" />
            </el-form-item>
            <el-form-item label="规格型号" label-width="20%">
                <el-input v-model="ownerUpdate.spec" v-autocomplete="off" />
            </el-form-item>
            <el-form-item label="单位" label-width="20%">
                <el-input v-model="ownerUpdate.unit" v-autocomplete="off" />
            </el-form-item>
            <el-form-item label="类别" label-width="20%">
                <el-input v-model="ownerUpdate.category" v-autocomplete="off" />
            </el-form-item>
            <el-form-item label="最低库存" label-width="20%">
                <el-input v-model="ownerUpdate.minStock" v-autocomplete="off" />
            </el-form-item>
            <el-form-item label="最高库存" label-width="20%">
                <el-input v-model="ownerUpdate.maxStock" v-autocomplete="off" />
            </el-form-item>
            <el-form-item label="库存" label-width="20%">
                <el-input v-model="ownerUpdate.stock" v-autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="updateDialogShow = false">取消</el-button>
                <el-button type="primary" @click="update">确认</el-button>
            </div>
        </template>
    </el-dialog>
    <!--修改业主的对话框结束-->
</template>

<script setup>
import { reactive, ref } from 'vue';
import { ElMessage, ElLoading } from 'element-plus';
import peiJianApi from "@/api/peiJianApi.js";
import { useTokenStore } from '@/stores/token';

const tokenStore = useTokenStore();

// 上传文件 headers
const headers = () => ({
    token: tokenStore.tokenStr
});

// 库存状态文本
const getStockStatusText = (row) => {
    if (row.stock > row.maxStock) return '库存溢出';  // 库存超过上限
    if (row.stock < row.minStock) return '库存不足';  // 库存低于下限
    return '正常';  // 库存处于正常区间
};

// 库存状态类型（控制标签颜色）
const getStockStatusType = (row) => {
    if (row.stock > row.maxStock) return 'danger';  // 红色标签
    if (row.stock < row.minStock) return 'warning';  // 黄色标签
    return 'success';  // 绿色标签
};

// 添加对话框状态
const addDialogshow = ref(false);
const updateDialogShow = ref(false);
const pageInfo = ref({ total: 0, pageSize: 0 });
const searchCondition = reactive({ partName: '', partCode: '' });

// 被添加/修改的业主信息
const ownerAdd = ref({
    partCode: '',
    partName: '',
    spec: '',
    unit: '',
    category: '',
    minStock: '',
    maxStock: '',
    stock: '',
});

const ownerUpdate = ref({
    partId: '',
    partCode: '',
    partName: '',
    spec: '',
    unit: '',
    category: '',
    minStock: '',
    maxStock: '',
    stock: '',
});

// 获取状态文字
function getStatusText(ogender) {
    return statusConfig[ogender]?.text || '未知状态';
}

// 获取状态颜色类型
function getStatusType(ogender) {
    return statusConfig[ogender]?.type || 'warning';
}
// 显示添加对话框
function showAddDialog() {
    ownerAdd.value = {
        partCode: '',
        partName: '',
        unit: '',
        category: '',
        minStock: '',
        maxStock: '',
        stock: '',
    };
    addDialogshow.value = true;
}
// 分页查询
function selectByPage(pageNum) {
    peiJianApi.selectByPage(pageNum, searchCondition)
        .then(resp => {
            pageInfo.value = resp.data;
        })
        .catch(error => {
            ElMessage.error('获取数据失败：' + error.message);
        });
}
// 搜索方法
function onSearch() {
    selectByPage(1);
}
// 修改业主信息
function update() {
    const loading = ElLoading.service();
    peiJianApi.update(ownerUpdate.value)
        .then(resp => {
            loading.close();
            if (resp.code === 10000) {
                ElMessage.success(resp.msg);
                updateDialogShow.value = false;
                selectByPage(pageInfo.value.pageNum);
            } else {
                ElMessage.error(resp.msg);
            }
        })
        .catch(error => {
            loading.close();
            ElMessage.error('修改失败：' + error.message);
        });
}

// 根据 ID 查询业主信息
function selectByoid(partId) {
    peiJianApi.selectById(partId)
        .then(resp => {
            ownerUpdate.value = { ...resp.data };
            updateDialogShow.value = true;
        })
        .catch(error => {
            ElMessage.error('查询失败：' + error.message);
        });
}

// 添加业主信息
function insert() {
    const loading = ElLoading.service();
    peiJianApi.insert(ownerAdd.value)
        .then(resp => {
            loading.close();
            if (resp.code === 10000) {
                ElMessage.success(resp.msg);
                addDialogshow.value = false;
                ownerAdd.value = { oname: '', ogender: '', ophone: '', address: '' };
                selectByPage(pageInfo.value.pageNum);
            } else {
                ElMessage.error(resp.msg);
            }
        })
        .catch(error => {
            loading.close();
            ElMessage.error('添加失败：' + error.message);
        });
}

// 删除业主信息
function deleteByOid(partId) {
    const loading = ElLoading.service();
    peiJianApi.delete(partId)
        .then(resp => {
            loading.close();
            if (resp.code === 10000) {
                ElMessage.success(resp.msg);
                selectByPage(pageInfo.value.pageNum);
            } else {
                ElMessage.error(resp.msg);
            }
        })
        .catch(error => {
            loading.close();
            ElMessage.error('删除失败：' + error.message);
        });
}

// 初始化加载数据
selectByPage(1);
</script>

<style scoped>
/* 可选：调整标签样式 */
.el-tag {
    font-size: 14px;
    padding: 4px 12px;
}
</style>